<template>
    <div class="layout">
      <div class="hot">
        <div class="title">
          <h3>{{ title }}</h3>
        </div>
        <router-link to="/" class="good_item" v-for="item in hotList" :key="item.id">
          <div class="img" @mouseover="hoveredItem = item.id" @mouseleave="hoveredItem = null">
            <img v-img-lazy="item.picture" :class="{ hovered: hoveredItem === item.id }" alt="" />
          </div>
          <div class="detail">
            <div class="name">{{ truncateText(item.name, 10) }}</div>
            <p class="desc">{{ truncateText(item.desc || "", 12) }}</p>
            <p class="price">{{ item.price }}元</p>
          </div>
        </router-link>
      </div>
    </div>
  </template>
  
  <script setup>
  import { getHotGoods } from "@/apis/detail";
  import { computed, onMounted, ref } from "vue";
  import { useRoute } from "vue-router";
  import { truncateText } from "@/utils/truncateText";
  
  const hoveredItem = ref(null);
  const hotList = ref([]);
  const route = useRoute();
  const props = defineProps({
    hotType: {
      type: Number,
      default: 1,
    },
  });
  
  const title = computed(() => (props.hotType === 1 ? '24小时热榜' : '周热榜'));
  
  const getHotList = async () => {
    const res = await getHotGoods({ id: route.params.id, type: props.hotType });
    hotList.value = res.result || []; // 确保即使没有结果也赋值为空数组
  };
  
  onMounted(getHotList);
  </script>
  
  <style lang="scss" scoped>
  .layout {
    .hot {
      width: 265px;
      .title {
        padding: 10px;
        background: #40e0d0;
        text-align: center;
      }
  
      .good_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px 0;
  
        .img {
          width: 150px;
          height: 150px;
          transition: transform 0.2s;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            object-fit: cover;
            transition: transform 0.2s;
          }
          img.hovered {
            transform: translateY(-5px);
          }
        }
  
        .detail {
          margin-top: 10px;
          text-align: center;
  
          .name {
            font-size: 15px;
          }
          .desc {
            font-size: 10px;
          }
          .price {
            padding: 5px;
            font-size: 15px;
            color: red;
          }
        }
      }
    }
  }
  </style>